<template>
    <div>
        <div id="container">

        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { Graph } from '@antv/x6';

const data = {
    // 节点
    nodes: [
        {
            id: 'node1', // String，可选，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            attrs: {
                body: {
                fill: '#2ECC71',
                stroke: '#000',
                strokeDasharray: '10,2',
                },
                label: {
                text: 'Hello',
                fill: '#333',
                fontSize: 13,
                }
            },
            label: '大伟聊前端', // String，节点标签
        },
        {
            id: 'node2', // String，节点的唯一标识
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            shape: 'ellipse', // 使用 ellipse 渲染
            label: '前端训练营', // String，节点标签
        },
    ],
    // 边
    edges: [
        {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2', // String，必须，目标节点 id
            attrs: {
                line: {
                    stroke: 'orange',
                },
            }
        },
    ],
};
onMounted(()=>{
    const dom: HTMLElement = document.getElementById('container') as HTMLElement;
    // const { Graph } = X6
    const graph = new Graph({
        container: dom,
        width: 800,
        height: 600,
        background: {
            color: '#fffbe6', // 设置画布背景颜色
        },
        grid: {
            size: 10,      // 网格大小 10px
            visible: true, // 渲染网格背景
        },
    });
    graph.fromJSON(data);
    });
</script>
